<template>
	<view class="main" :style="{'--color':vuex_config.themeColor1}">
		<view class="index-box">
			<view class="order-no c-00A6F8">订单号：{{ dataForm.order_no }}</view>
			<template v-if="dataForm.type == 7">
				<view class="prod-info u-flex" @click="linkToProd">
					<view class="prod-r f-26 c-99">
						<view class="prod-title u-font-30 fw-bold u-line-1 c-33">
							{{PhoneandName || ''}}
						</view>
						<view class="u-font-30 u-m-t-5">
							{{dataForm.detailed[0].meal_name}}
						</view>
						<view class="u-m-t-5 u-m-b-5 u-m-l-20" v-for="(item,index) in dataForm.detailed" :key=index>
							<text>{{item.product_name}} X{{item.num}}</text>
						</view>
						<view class="fs">
							<text>份数：</text>
							<text class="num">{{ getNum }}</text>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="prod-info u-flex" @click="linkToProd">
					<view class="prod-r f-26 c-99">
						<view class="prod-title u-font-30 fw-bold u-line-1 c-33">{{ dataForm.name || '' }}</view>
						<view class="prod_name u-line-2">{{ getName }}</view>
						<view class="">
							<text>可核销数</text>
							<text class="num">{{ getNum }}</text>
						</view>
					</view>
				</view>
			</template>
			<view class="qr-code-box">
				<view class="qr-code">
					<image :src="qrCodeUrl" show-menu-by-longpress></image>
					<view v-if="dataForm.type==7" class="qr-code-item">取餐码：{{dataForm.pk_id}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		resGet
	} from '@/common/http.request.js';
	export default {
		data() {
			return {
				dataForm: {},
				qrCodeUrl: '',
			};
		},
		computed: {
			PhoneandName() {
				let {dataForm ,vuex_user} = this
				let name = dataForm.name ? dataForm.name : vuex_user.nickname ? vuex_user.nickname : ''
				let mobile = dataForm.mobile ? dataForm.mobile : vuex_user.mobile ? vuex_user.mobile : ''
				let namePhone = ''
				if (name && mobile) {
					namePhone = `${name} - ${mobile}`
				} else if (name && !mobile) {
					namePhone = name || ''
				} else if (!name && mobile) {
					namePhone = mobile || ''
				}
				return namePhone || ''
			},
			getName() {
				if (this.dataForm.detailed && this.dataForm.detailed.length > 0) {
					let str = this.dataForm.detailed.map(item => item.product_name).join();
					return str;
				} else {
					return '';
				}
			},
			getNum() {
				if (this.dataForm.detailed && this.dataForm.detailed.length > 0) {
					let num = this.dataForm.detailed.reduce((pre, next) => {
						if (next.validate_num) {
							next.validate_num = parseInt(next.validate_num);
						} else {
							next.validate_num = 0;
						}
						return pre + (parseInt(next.num) - next.validate_num);
					}, 0);
					return num;
				} else {
					return 0;
				}
			}
			// getEnterDate() {
			// 	if (!this.dataForm.detailed) return '';
			// 	return this.dataForm.detailed[0].enter_date;
			// }
		},
		onLoad: function(options) {
			if (options.id && options.orderNo) {
				this.initPage(options.id, options.orderNo);
			}
		},
		onUnload() {
			// #ifdef MP-BAIDU	
			// 写入文件后要清除 不然会堆积
			const fsm = swan.getFileSystemManager();
			fsm.unlink({
				filePath: this.qrCodeUrl,
			})
			// #endif 
		},
		methods: {



			//初始化
			initPage(id, order_no) {
				let that = this
				this.$loading();
				Promise.all([this.$resPost('GetOrderDetailedInfo', {
					pk_id: id
				}), resGet('GenerateQRCode', {
					content: order_no
				}, {}, {
					blob: true
				})]).then(res => {
					this.dataForm = res[0].data;

					// #ifdef MP-BAIDU	
					uni.loading()
					// 傻逼百度小程序不支持 uni.arrayBufferToBase64 并且本身也没有arrayBuffer转base64的api  所以需要写入文件后转换成url显示
					const fsm = swan.getFileSystemManager();
					const FILE_BASE_NAME = new Date().getTime();
					const filePath = swan.env.USER_DATA_PATH + '/' + FILE_BASE_NAME + '.png'
					fsm.writeFile({
						filePath,
						data: res[1],
						success() {
							that.qrCodeUrl = filePath
							uni.hideLoading()
						},
						fail() {
							uni.hideLoading()
							this.$toast('生成失败，请重新刷新')
						}
					})
					// #endif 

					// #ifndef  MP-ALIPAY ||  MP-BAIDU	
					this.qrCodeUrl = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(res[1] || []);
					// #endif 

					// #ifdef  MP-ALIPAY	
					this.qrCodeUrl = 'data:image/jpeg;base64,' + my.arrayBufferToBase64(res[1] || [])
					// #endif 
					this.$hide();
				});
			},
			// 跳转产品详情
			linkToProd() {
				return;
				this.$toProd();
			}
		}
	};
</script>
<style>
	page {
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: var(--color);
	}

	.fs {
		text-align: right;
	}

	.index-box {
		width: 100%;
		min-height: 500rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		overflow: hidden;

		.order-no {
			width: 100%;
			height: 80rpx;
			background-color: rgba(143, 208, 240, 0.3);
			padding: 0 30rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}

		.prod-info {
			width: 100%;
			padding: 30rpx 30rpx 48rpx;
			position: relative;

			&::before,
			&::after {
				content: '';
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: var(--color);
				position: absolute;
				bottom: 0;
			}

			&::before {
				left: 0;
				transform: translate(-50%, 50%);
			}

			&::after {
				right: 0;
				transform: translate(50%, 50%);
			}

			.prod-img {
				width: 230rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 30rpx;
			}

			.prod-r {
				height: 180rpx;
				flex: 1;

				.prod_name {
					padding: 6rpx 0;
				}

				.num {
					color: #00a;
				}
			}
		}

		.qr-code-box {
			width: 100%;
			height: 650rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			&::before {
				content: '';
				width: 584rpx;
				height: 1rpx;
				border-bottom: 1rpx dashed rgba(0, 166, 248, 0.5);
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.qr-code {
				width: 430rpx;
				height: 430rpx;
				border: 1rpx solid #e3e1e1;
				padding: 10rpx;
				position: relative;

				.qr-code-item {
					width: 100%;
					position: absolute;
					top: -90rpx;
					left: 50%;
					right: 0;
					transform: translateX(-50%);
					text-align: center;
					font-size: 50rpx;
					font-weight: 700;
				}
			}
		}
	}
</style>
